

<div style="display: grid; grid-gap: 20px; grid-template-columns: 1fr 120px;">
  <div class="detail">
    <Atlas 
      ref:atlas
      id="inceptionv1_{layerName}" 
      bind:gridSize
      bind:homeX 
      bind:homeY 
      bind:homeScale
      bind:aspectRatio
      bind:scale
      bind:extent
      bind:showLabels
      textShadow={true}
      backgroundColor="#dfdfdf"
    />
  </div>
  <div>
    <div class="atlas">
      <img src="assets/images/renders/thumbnail-{layerName}.jpg" alt="thumbnail for {layerName}">
      <AtlasReticle
        bind:extent
        on:drag="refs.atlas.translateTo(event.gcx, event.gcy)"
      />
    </div>
    <div class="controls">
      <Button backgroundColor="rgb(245, 245 ,245)" on:click="refs.atlas.home(2000)"><Navigation name="home" color="rgb(100, 100, 100)"/></Button>
      <Button backgroundColor="rgb(245, 245 ,245)" on:click="refs.atlas.scaleBy(2)"><Navigation name="add" color="rgb(100, 100, 100)"/></Button>
      <Button backgroundColor="rgb(245, 245 ,245)" on:click="refs.atlas.scaleBy(0.5)"><Navigation name="remove" color="rgb(100, 100, 100)"/></Button>
    </div>
  </div>
</div>
<script>
export default {
  components: {
    Button: "../library/Button.html",
    Navigation: "../library/icons/Navigation.html",
    Atlas: "../Atlas.html",
    AtlasReticle: "../AtlasReticle.html"
  },
  data() {
    return {
      layerName: "mixed4c",
      gridSize: 2,
      homeScale: 14,
      showLabels: true
    }
  }
}
</script>

<style>
  .atlas {
    margin-top: 1px;
    position: relative;
    width: 120px;
    height: 120px;
  }
  .detail {
    height: 300px;
  }
  img {
    display: block;
    width: 100%;
    opacity: 0.4;
  }
  .controls {
    margin-top: 16px;
  }
</style>